const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: "js/build.js",
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 处理less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 处理css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理图片资源
      {
        test: /\.(png|jpg|gif)$/,
        // 使用一个loader
        loader: 'url-loader', // 注意：url-loader依赖file-loader，所以这两个包都要下载
        options: {
          limit: 10 * 1024,
          outputPath: 'img',
          name: '[name].[hash:10].[ext]',
          esModule: false
        },
        type: 'javascript/auto'
      },
      {
        test: /\.html$/,
        // 处理html中img标签引入的图片（负责引入img，从而被url-loader处理）
        loader: 'html-loader'
      },
      // 其他资源
      {
        exclude: /\.(html|png|jpg|gif|css|less|js)$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash:10][ext][query]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    })
  ],
  mode: "development",
  devServer: {
    static: {
      directory: resolve(__dirname, 'dist')
    },
    compress: true,
    port: 3000,
    open: false,
    // 开启 HMR
    hot: true
  },

  /**
   * source-map: 一种提供源代码到构建后代码的映射 技术
   *
   * source-map: 外部
   *    能够提示错误代码准确信息 和 源代码的错误位置
   *
   * inline-source-map: 内联
   *    1. 没有生成map文件
   *    2. 只生成一个内敛source-map
   *    3. 能够提示错误代码准确信息 和 源代码的错误位置
   * hidden-source-map: 外部
   *    1. 生成外部map文件
   *    2. 能够提示错误代码准确信息 但是 没有提示源代码错误位置
   * eval-source-map: 内联
   *    1. 没有生成map文件
   *    2. 每一个js文件都会生成一个source-map。都在eval函数中
   *    3. 能够提示错误代码准确信息 和 源代码的错误位置
   * nosources-source-map: 外部
   *    1. 能够提示错误代码准确信息 但是 没有任何源代码信息
   * cheap-source-map: 外部
   *    1. 能够提示错误代码准确信息 但是 源代码中只能精确到行
   * cheap-module-source-map: 外部
   *    1. 能够提示错误代码准确信息 但是 源代码中只能精确到行
   *    2. module 会将 loader 的source-map加入
   *
   *  环境需求
   *    开发环境：速度快，调试友好
   *      速度快（eval > inline > cheap > ...）
   *        eval-cheap-source-map
   *        eval-source-map
   *      调试友好
   *        source-map
   *        cheap-module-source-map
   *        cheap-source-map
   *
   *       综合：
   *        eval-source-map
   *
   *    生产环境：源代码要不要隐藏？调试要不要更友好
   *        内联会让代码体积变大，所以在生产环境内不用内联
   *        nosources-source-map（隐藏构建代码和源代码）
   *        hidden-source-map（只隐藏源代码）
   *
   *        综合：
   *          source-map
   *
   * */
  devtool: 'eval-source-map'


}